<template>
    <u-upload @on-remove="onRemove" @on-uploaded="onUploaded" :show-upload-list="showUploadList" :custom-btn="true"
        :deletable="deletable" :height="height" :width="width" :name="name" :max-count="maxCount" :action="action"
        :file-list="fileList" @on-success="onSuccess" :multiple="multiple">
        <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" :form-data="formData">
            <slot name="customize">
                <image src="/static/icons/upload1.png" />
            </slot>
        </view>
    </u-upload>
</template>

<script>
/**
 * @description 用于上传
 * @property {Number String} max-count 最大选择图片的数量
 * @property {String} action 服务器上传地址
 * @property {String} type 上传类型(根据后台配置) 类型 images=图片，file=文件
 */
export default {
    name: 'uview-upload',
    props: {
        maxCount: {
            type: [Number, String],
            default: 1
        },
        action: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: "images"
        },
        name: {
            type: String,
            default: "img"
        },
        deletable: {
            type: Boolean,
            default: false
        },
        height: {
            type: [Number, String],
            default: 128
        },
        width: {
            type: [Number, String],
            default: 128
        },
        showUploadList: {
            type: Boolean,
            default: true
        },
        multiple: {
            type: Boolean,
            default: true
        },
        fileList: {
            type: Array,
            deafult: () => {
                return []
            }
        }
    },
    onLoad() {
        this.onSuccess()
    },
    data() {
        return {
            img: '',
            // 演示地址，请勿直接使用
            formData: {
                type: this.type,
                img: this.img
            },
        }
    },
    methods: {
        // 上传成功触发
        onSuccess(data) {
            // console.log('data: ', data);
            this.img = data.path
            this.id = data.id
            this.$emit('uploadImg', data.id, data.path)
        },
        // 全部上传完成触发
        onUploaded(data) {
            this.$emit('onUploaded', data)
        },
        // 删除触发
        onRemove(idx, lists) {

            this.$emit('onRemove', idx, lists)
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .u-delete-icon {
    width: 20rpx;
    height: 20rpx;
}

image {
    width: 74rpx;
    height: 74rpx
}
</style>